<template>
  <div class="testList">
    <div style="position: absolute;top: 10px;right: 150px;">
      <el-button type="primary" @click="logoutFn">退出登录</el-button>
    </div>
    <div class="innerBox">
      <div class="topBox">
        <div class="left">
          <el-input v-model="name" placeholder="请输入姓名"/>
          <el-input v-model="phone" placeholder="请输入联系电话"/>
          <el-button @click="searchFn">查询</el-button>
        </div>
        <div class="right">
          <!-- <el-button type="primary" @click="addTestFn">新增被试</el-button> -->
          <el-select v-model="personType" placeholder="新增被试" @change="addTestFn">
            <el-option label="成人" value="adult"></el-option>
            <el-option label="儿童" value="child"></el-option>
          </el-select>
        </div>
      </div>
      <div class="listBox">
        <el-scrollbar>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="序号" width="60" align='center'>
              <template #default="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"  align='center' />
            <el-table-column prop="birthday" label="出生日期" align='center' />
            <el-table-column prop="phone" label="联系电话"  align='center' />
            <el-table-column label="操作"  align='center' width="240">
              <template #default="scope">
                <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button @click="handleFiles(scope.$index, scope.row)">档案</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      
      <!-- :hide-on-single-page="true" -->
      <div class="pageBox">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          :page-size="pageSize"
          :current-page="pageNum"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { seckGetPsychTested } from '@/api/home.js'
export default {
  data() {
    return {
      personType: '',
      name: '',
      phone: '',
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // sex 0男 1女；classification 0儿童 1成人
      baseInfo: {
        name: '',
        sex: '0',
        birthday: '',
        race: '',
        character: '',
        phone: '',
        email: '',
        classification:'1',
        prov: '',
        city: '',
        country: '',
        address: '',
        education: '',
        occupation: '',
        WAIMS_TOKEN: ''
      },
    }
  },
  mounted() {
    if(localStorage.getItem('WAIMS_TOKEN') && localStorage.getItem('WAIMS_TOKEN') !== '') {
      this.WAIMS_TOKEN = localStorage.getItem('WAIMS_TOKEN')
      this.geListFn()
    } else {
      // alert('没有获取到登录token')
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    }
  },
  methods: {
    logoutFn() {
      // alert('塞克内部退出登录')
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    },
    handleEdit(index,row) {
      console.log(index,row)
      sessionStorage.setItem('personType', row.classification == '1' ? 'adult' : 'child')
      this.$router.push({
        path: '/enterInformation',
        query: {
          type: 'edit',
          formInfo: JSON.stringify(row)
        }
      })
    },
    handleFiles(index, row) {
      console.log(index,row)
      sessionStorage.setItem('testedId', row.id)
      sessionStorage.setItem('personType', row.classification == '1' ? 'adult' : 'child')
      // 姓名 出生日期 电话
      sessionStorage.setItem('name', row.name)
      sessionStorage.setItem('birthday', row.birthday)
      sessionStorage.setItem('phone', row.phone)
      this.$router.push({
        path: '/personList',
        query: {
          type: 'look'
        }
      })
    },
    handleCurrentChange(val) {
      console.log(val)
      this.pageNum = val
      this.geListFn();
    },
    geListFn() {
      var query = {
        WAIMS_TOKEN: this.WAIMS_TOKEN,
        // testId: 10008,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: this.name,
        phone: this.phone

      }
      seckGetPsychTested(query).then(res => {
        if(res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      })
    },
    searchFn() {
      this.pageNum = 1
      this.total = 0
      this.geListFn()
    },
    addTestFn() {
      console.log(this.personType)
      sessionStorage.setItem('personType', this.personType)
      this.$router.push({
        path: '/enterInformation',
        query: {
          type: 'add',
          formInfo: JSON.stringify(this.baseInfo)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.testList {
  height: calc(100vh - 200px);
  background: url(../assets/images/tongyong.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 100px 140px;
  .innerBox {
    height: calc(100% - 80px);
    padding: 40px 20px;
    background-color: #ffffff;
    box-shadow: 35px 35px 50px 0px 
      rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  .topBox {
    margin: 0px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .listBox {
    height: calc(100% - 100px);
  }
  .pageBox {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss">
.testList {
  .el-input {
    width: 200px;
    margin-right: 20px;
  }
}
</style>